<template>
  <div class="yxp-course">
    <TopBack :title="title" :id="toNumber(userid)" type="1"  @point="handlePoint"/>
    <div class="yxp-scene-main">
      <div class="main-box">
        <div class="main-box-content">
          <div class="content">
            <div class="content-wrap retell-box scrolToMinView">
              {{articleType}}
              <template>
                <template>
                  <span v-for="(item,i) in zhText" :key="'z' + i"
                        :class="{active2: item.isRead , on2: item.isRead && iNow !== i}"
                        :style="{'margin-left': item.isStart ? '40px' : 0}" @click="handleSelect(item,i)"
                        v-html="item.name"></span>
                </template>
              </template>
            </div>
          </div>
        </div>
        <div class="main-box-content">
          <div class="content eye-wrap">
            <div class="content-wrap retell-box retell-wrap scrolToMinView">
              <div class="eye-box" @click="handleOpen">
                <img src="@/assets/composition/eye-open.png" class="eye-icon" v-if="isOpen"/>
                <img src="@/assets/composition/eye-hide.png" class="eye-icon" v-else/>
              </div>
              <div v-if="isOpen">
                <template>
                  <template >
                    <template v-for="(item,i) in enText">
                      <span :key="'e' + i" :class="{active: item.isRead && iNow === i, on: item.isRead && iNow !== i}"
                            v-if="i <= iStep" :style="{'margin-left': item.isStart ? '40px' : 0}"
                            @click="handleSelectEn(item,i)" v-html="item.name"></span>
                    </template>
                  </template>
                </template>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="scene">
      <div class="scene-btn">
        <div class="scene-btn-item" id="yxp-retell-btn" @click="handleNext">
          <span style="    margin-right: 10px;">复述训练</span>
          <img src="@/assets/word/no-next.png" v-if="zhText.length - 1 === iStep" class="next"/>
          <img src="@/assets/word/no-next.png" v-else class="next"/>
        </div>
      </div>
    </div>
    <div class="mark" v-if="isEn"></div>
<!--    <ScenePop :title="popTitle" :isEn="isEn" type="3" :id="id" :courseId="courseId" @closePop="handleClosePop"/>-->
    <audio :src="audioSrc" ref="audio"/>
  </div>
</template>
<script>
import TopBack from '@/views/components/TopBack.vue'
// import ScenePop from '../components/ScenePop.vue'
import {storage} from '@/utils/storage.js'
import {toNumber} from "lodash/lang";
import {progressSet} from "@/api/reverse";

export default {
  name: 'retell',
  components: {
    TopBack,
  },
  data() {
    return {
      title: '英语习得与切片训练',
      courseId: '',
      id: 0,
      userid: 0,
      course_type: 0,
      zhText: [],
      zhHead: '',
      zhEnd: '',
      enText: [],
      enAudio: [],
      audioSrc: '',
      enHead: '',
      enEnd: '',
      iNow: -1,
      iStep: -1,
      isShow: false,
      isOpen: false,
      isNext: false,
      popTitle: '开始全文还原训练吧~',
      isEn: false,
      articleType: 0,
      end: false // 最后的结束语
    }
  },
 async created() {

    if (this.$route.query.userid) {
      let {courseId, userid, course_type} = this.$route.query
      this.courseId = +courseId
      this.id = +userid
      this.userid = this.$route.query.userid
      console.log(this.userid)
      this.course_type = +course_type
      let pms ={
        id:this.$route.query.id,
        userId:this.$route.query.userid,
        progress:3,
        state:0,
      }
      await progressSet(pms).then((res)=>{
        let ModeListInfo = storage.get('ModeListInfo')
        ModeListInfo = {
          ...ModeListInfo,
          num:res.data.num
        }
        storage.set('ModeListInfo', ModeListInfo)
      })
    }
    let data = storage.get('sceneData')
    if (data) {
      this.articleType = data.type
      let zhText = data.sentence
      let enText = data.sentenceTranslation
      // this.enAudio = data.single_voice
      if (this.articleType === 1 || this.articleType === 5 || this.articleType === 2) {
        this.zhHead = zhText.splice(0, 1).join('').replace('##', '')
        this.zhEnd = zhText.pop()
        this.enHead = enText.splice(0, 1).join('').replace('##', '')
        this.enEnd = enText.pop()
        if (this.enEnd.indexOf('##')) {
          this.enEnd = this.enEnd.replace('##', '<br/>')
        }
        this.enAudio.splice(0, 1)
        this.enAudio.pop()
      } else if (this.articleType === 3 || this.articleType === 4) {
        this.zhHead = zhText.splice(0, 1).join('').replace('##', '')
        this.enHead = enText.splice(0, 1).join('').replace('##', '')
        this.enAudio.splice(0, 1)
      }

      let zhArr = []
      let enArr = []
      zhText.map(item => {
        let obj = {}
        let val = ''
        if (item.indexOf('&&') !== -1 && item.indexOf('##') !== -1) {
          let val1 = item.replace('&&', '')
          val = val1.replace('##', '<br>')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          zhArr.push(obj)
        } else if (item.indexOf('&&') !== -1) {
          val = item.replace('&&', '')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          zhArr.push(obj)
        } else if (item.indexOf('##') !== -1) {
          console.log(item)
          val = item.replace('##', '<br>')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          zhArr.push(obj)
        } else {
          val = item
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          zhArr.push(obj)
        }

      })
      enText.map(item => {
        let obj = {}
        let val = ''
        if (item.indexOf('&&') !== -1 && item.indexOf('##') !== -1) {
          let val1 = item.replace('&&', '')
          val = val1.replace('##', '<br>')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          enArr.push(obj)
        } else if (item.indexOf('&&') !== -1) {
          val = item.replace('&&', '')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = true
          enArr.push(obj)
        } else if (item.indexOf('##') !== -1) {
          console.log(item)
          val = item.replace('##', '<br>')
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          enArr.push(obj)
        } else {
          val = item
          obj.name = val
          obj.isRead = false
          obj.isNum = 0
          obj.isStart = false
          enArr.push(obj)
        }

      })
      this.zhText = zhArr
      this.enText = enArr
      this.$message.error('请依次点击左侧英文句子')
    }
  },
  methods: {
    toNumber,
    handleSelect(item, i) {
      if (!item.isRead) {
        if (i > this.iStep + 1) {
          this.$message.error('此句还未解锁')
          return
        } else {
          item.isRead = true
          console.log(this.zhText)
          this.$set(this.enText[i], 'isRead', true)
          this.iStep++
          this.iNow = this.iStep
          if (this.iStep === this.enText.length - 1) {
            this.end = true
          }
        }
      } else {
        this.iNow = i
      }
    },
    handleSelectEn(item, i) {
      this.iNow = i
      // this.audioSrc = this.enAudio[i]
      // let audio = this.$refs.audio
      // console.log(audio)
      // setTimeout(() => {
      //   audio.play()
      // }, 10)
    },
    handleOpen() {
      this.isOpen = !this.isOpen
    },
    handleNext() {
      // if (this.zhText.length - 1 > this.iStep){
      //   return;
      // }
      this.$router.push({
        path: "/composition/keepOut",
        query: {
          userid:this.userid,
          id:this.$route.query.id,
        },
      });
      // this.isEn = true
    },
    handleClosePop(val) {
      this.isEn = val
    },
    handleTips() {
      this.$message.error('学习正文吧~')
    },
    handlePoint() {
    }
  }
}
</script>
<style  scoped>
.main-box{
  position: relative;
  display: flex;
  justify-content: center;
  width: inherit;
  margin-top: 30px;
}
.main-box-content{
  position: relative;
  background: #fff;
  border-radius: 10px;
  height: 300px;
  width: 570px;
  overflow-y: auto;
  padding: 30px;
  .content{
    position: relative;
    text-align: left;
    //padding: 18px 10px 12px 0;
  }
}
.main-box-content:first-child{
  margin-right: 20px;
}
.scene{
  display: flex;
  width: 100%;
}
.scene-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 800px;
  margin: 20px auto;
}
.scene-btn-item{
  display: flex;
  align-items: center;
  cursor: pointer;
  span
  {
    color: #27bfa3;
    font-size: 20px;
    font-weight: 400;
  }
  img{
    width: 40px;
    height: 40px
  }
}
.ant-tooltip, .ant-slider-tooltip, .ant-tooltip-placement-bottom {
  display: none !important;
}
.yxp-course{
  width: 100%;
  height: 100%;
  background: #F0F2F4;
  overflow: hidden;
}
.eye-wrap {
  //padding-top: 60px !important;
}

.retell-box {
  //padding-top: 32px !important;

  .active {
    color: #fff;
    background: #27BFA3;
  }
  .active2 {
    color: #333;
  }
  .on {
    color: #333;
  }
  .on2 {
    color: #F0F2F4;
    background: #F0F2F4;
  }

  span {
    line-height: 28px;
    font-size: 20px;
    font-weight: 400;
    color: #666;
    cursor: pointer;
  }

}

.retell-wrap {
  padding-top: 0 !important;
}

.eye-box {
  position: absolute;
  right: -23px;
  top: -22px;
  width: 30px;
  height: 30px;

  .eye-icon {
    width: 100%;
    height: 100%;
  }
}
</style>